<template>
	<div id="index">
		<el-container>
			<el-header style="height: 55px;">
				<span style="padding-left: 50px; float: left; color: bisque; font-size: 40px; margin-top: 10px;">
					百&nbsp;货&nbsp;商&nbsp;城</span>
				<ul>

					<li>
						<div class="userImg">
							<el-avatar style="margin-top: 10px;" icon="el-icon-s-custom"></el-avatar>
							<!-- 把用户名传递过来 -->
							<span v-if="username">欢迎{{username}}</span>
							<span v-else style="color: skyblue;">
								<router-link to="/MemberLogin">去登录</router-link>
							</span>
						</div>
					</li>
					<!-- <li style="color: green;" @click='changePage("Register")'>点我注册</li> -->
					<li style="color: red;" @click='changePage("Index")'>商城首页</li>
					<li @click='changePage("ShopCart")'>购物车</li>
					<li @click='changePage("Favorites")'>收藏夹</li>
					<li @click='changePage("OrderCenter")'>我的订单</li>
					<li @click='changePage("PerCenter")'>个人中心</li>
					<li v-if="username" @click='changePage("exit")'>退出登录</li>
					<li style="color: greenyellow ; font-size: 22px;" @click='changePage("main")'>管理员入口</li>
				</ul>
			</el-header>
			<el-main>
				<div>
					<p>
						<input type="search" name="" id="" value="" placeholder="请输入搜索内容" />
						<el-button type="primary" icon="el-icon-search">搜索</el-button>
					</p>
				</div>
				<div>
					<el-tabs type="card" @tab-click="tabClick" v-model="activeName" tabPosition="">
						<el-tab-pane :id="'mytab'+cat.cat_id" :label="cat.cat_name" :name="cat.cat_id+''"
							:key="cat.cat_id" v-for="(cat,index) in cats">
							<span slot="label"><el-avatar style="width: 20px; height: 20px;
							margin-top: 8px;
							 margin-left: 30px;" :src="cat.cat_icon"></el-avatar></i> {{cat.cat_name}}</span>
							<div>
								<DailyRecom @getGoodsId="collectionGoodsById" @getGoodsIdForCart="addCartGoodsById"
									:carGoodsData="cat.goodsList">
								</DailyRecom>
							</div>
						</el-tab-pane>
						<!-- <el-button type="success" @click="moreCat">更多分类</el-button> -->
						<el-button type="success" @click="moreGoods">更多商品</el-button>
					</el-tabs>
				</div>
			</el-main>
		</el-container>
	</div>
</template>
<script>
	import DailyRecom from './DailyRecom.vue';
	export default {
		created() {
			//因为设置了缓存 所以不放 created()里面了
			console.log('Index组件被激活了')
			let memberInfo = window.sessionStorage.getItem("memberInfo");
			if (memberInfo) {
				console.log(memberInfo);
				let memberInfoObj = JSON.parse(memberInfo);
				//console.log('memberInfoObj',memberInfoObj)
				this.username = memberInfoObj.username;
				this.memberId = memberInfoObj.member_id;

				console.log(this.username, '111111111', this.memberId)
			} else {
				//在首页可以不登录查看的
				//this.$router.push('/MemberLogin');
				this.username = '';
				this.memberId = '';
			}

			this.getCatGoodsList();

			//setTimeout(JavaScript 函数, 等待的毫秒数)
			let _this = this;
			setTimeout(_this.getMoreCatGoodsByCatId(), 1); //getCatGoodsList


		},
		// activated() {
		// 	//因为设置了缓存 所以不放 created()里面了
		// 	console.log('Index组件被激活了')
		// 	let memberInfo = window.sessionStorage.getItem("memberInfo");
		// 	if (memberInfo) {
		// 		console.log(memberInfo);
		// 		let memberInfoObj = JSON.parse(memberInfo);
		// 		//console.log('memberInfoObj',memberInfoObj)
		// 		this.username = memberInfoObj.username;
		// 		this.memberId = memberInfoObj.member_id;

		// 		console.log(this.username, '111111111', this.memberId)
		// 	} else {
		// 		//在首页可以不登录查看的
		// 		//this.$router.push('/MemberLogin');
		// 		this.username = '';
		// 		this.memberId = '';
		// 	}
		// },
		// mounted() {
		// 	//因为设置了缓存 所以不放 created()里面了L
		// 	let memberInfo = window.sessionStorage.getItem("memberInfo");
		// 	if (memberInfo) {
		// 		console.log(memberInfo);
		// 		let memberInfoObj = JSON.parse(memberInfo);
		// 		//console.log('memberInfoObj',memberInfoObj)
		// 		this.username = memberInfoObj.username;
		// 		this.memberId = memberInfoObj.member_id;

		// 		console.log(this.username, '111111111', this.memberId)
		// 	} else {
		// 		//在首页可以不登录查看的
		// 		//this.$router.push('/MemberLogin');
		// 		this.username = '';
		// 		this.memberId = '';
		// 	}


		// 	this.getCatGoodsList();

		// 	//setTimeout(JavaScript 函数, 等待的毫秒数)
		// 	let _this = this;
		// 	setTimeout(_this.getMoreCatGoodsByCatId(), 1);//getCatGoodsList


		// },
		data() {
			return {
				activeName: '1',
				activeIndex: '1',
				cats: [],
				//登录的用户名
				username: '',
				memberId: ''
			}
		},
		methods: {
			moreGoods() {
				//点击更多商品获得该类的所有商品
				let _this = this;
				let url = "/api/mall/CatsServlet2?method=getMoreGoodsByCatId";

				this.$http.get(url, {
					params: {
						catId: this.activeName

					}
				}).then(function(response) {
					console.log("addCartGoodsById 服务端返回的数据为:", response);
					if (response.data.code == 0) {
						//_this.$message.success(response.data.msg)
						let goodsListForData = response.data.data;
						console.log('goodsListForData', goodsListForData)
						for (let i = 0; i < _this.cats.length; i++) {
							if (_this.cats[i].cat_id == _this.activeName) {
								_this.cats[i].goodsList = goodsListForData;
								return;
							}
						}
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},
			moreCat() {
				//点击更多分类查询所有的分类
				let _this = this;
				let url = "/api/mall/CatsServlet2?method=getMoreCatGoodsByCatId";

				this.$http.get(url).then(function(response) {
					console.log("addCartGoodsById 服务端返回的数据为:", response);
					if (response.data.code == 0) {
						//_this.$message.success(response.data.msg)
						let catGoodsListForData = response.data.data;
						for (let i = 0; i < catGoodsListForData.length; i++) {
							//catGoodsListForData[i]
							_this.cats.push(catGoodsListForData[i]);
						}
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},
			//	handleClick(tab, event) {
			// 	console.log(tab, event);
			// },
			tabClick(tab, event) {
				//console.log('activeName',this.activeName)
			},
			async addCartGoodsById(goodsId) {
				console.log("Index页面 getGoodsIdForCart被执行")
				if (!this.memberId) {
					this.$notify({
						title: '提示',
						message: "你还未登录，请先登录再来",
						duration: 2000
					});
					return;
				}

				//获得子组件传递过来商品id
				//console.log('!!!!!!!!!!!!!!!!!!! Idnex 页面 获得到的', goodsId);
				//把改该商品添加至会员的收藏夹

				console.log("调用了collectionGoodsById方法");
				let _this = this;
				let url = "/api/mall/ShopCartServlet?method=addCartGoodsById";

				await this.$http.get(url, {
					params: {
						goodsId: goodsId,
						memberId: _this.memberId
					}
				}).then(function(response) {
					console.log("addCartGoodsById 服务端返回的数据为:", response);
					if (response.data.code == 0) {
						//response.data.msg
						_this.$notify({
							title: '提示',
							message: response.data.msg,
							duration: 2000
						});
					} else {
						_this.$notify({
							title: '提示',
							message: response.data.msg,
							duration: 2000
						});
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})

			},
			async collectionGoodsById(goodsId) {
				if (!this.memberId) {
					this.$notify({
						title: '提示',
						message: "你还未登录，请先登录再来收藏",
						duration: 2000
					});
					return;
				}

				//获得子组件传递过来商品id
				//console.log('!!!!!!!!!!!!!!!!!!! Idnex 页面 获得到的', goodsId);
				//把改该商品添加至会员的收藏夹

				console.log("调用了collectionGoodsById方法");
				let _this = this;
				let url = "/api/mall/CollectionServlet?method=collectionGoodsById";

				await this.$http.get(url, {
					params: {
						goodsId: goodsId,
						memberId: _this.memberId
					}
				}).then(function(response) {
					console.log("collectionGoodsById 服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.$notify({
							title: '提示',
							message: response.data.msg,
							duration: 2000
						});
					} else {
						_this.$notify({
							title: '提示',
							message: response.data.msg,
							duration: 2000
						});
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})


			},
			//获取数据展示 一种分类 后行
			getMoreCatGoodsByCatId: async function(addressId) {
				console.log("调用了getCatGoodsList方法");
				let _this = this;
				let url = "/api/mall/CatsServlet2?method=getMoreCatGoodsByCatId";

				await this.$http.get(url).then(function(response) {
					console.log("address服务端返回的数据为:", response);
					if (response.data.code == 0) {
						// _this.cats = response.data.data;
						let cats = response.data.data;
						for (let i = 0; i < cats.length; i++) {
							_this.cats.push(cats[i]);
						}
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},
			//获取数据展示 先行
			getCatGoodsList: function(addressId) {
				console.log("调用了getCatGoodsList方法");
				let _this = this;
				let url = "/api/mall/CatsServlet2?method=getCatGoodsList";

				this.$http.get(url).then(function(response) {
					if (response.data.code == 0) {
						// let cats = response.data.data;
						// for (let i = 0; i < cats.length; i++) {
						// 	_this.cats.push(cats[i]);
						// }
						_this.cats = response.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},
			//页面跳转事件
			changePage(path) {
				window.sessionStorage.setItem('activePath', '/' + path)
				if (path == "exit") {
					window.sessionStorage.removeItem("memberInfo")
					path = "MemberLogin";
					window.sessionStorage.setItem('activePath', '/' + path)
				}
				this.$router.push('/' + path);

			},

			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		},
		components: {
			DailyRecom
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	#index {
		position: absolute;
		display: flex;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* background-color: #FF0000; */

	}

	.el-header {
		background-color: #cccccc;
		color: #333;
		text-align: center;
		height: 5%;
		line-height: 25px;
	}

	.el-main {
		background-color: #ffffff;
		color: #000000;
		text-align: center;
		height: 95%;
		background-image: url(../assets/7.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		/* background-color: #0000FF; */
	}

	.el-container {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.el-header>ul {
		position: absolute;
		right: 5px;
	}

	.el-header>ul>li {
		float: left;
		list-style: none;
		margin: 5px;
		user-select: none;
	}

	.el-header>ul>li:not(:first-child):hover {
		color: red;
		text-decoration: underline;
	}

	.el-avatar {
		position: absolute;
		left: -30px;
		top: 2px;
		width: 33px;
		height: 30px;
		color: #42B983;
		/* border: 1px solid #0000FF; */
	}

	.el-avatar--icon {
		font-size: 35px;
	}

	.userImg {
		display: flex;
		/* align-items: center; */
		vertical-align: middle;
	}

	input[type="search"] {
		width: 600px;
		height: 35px;
		font-size: 15px;
		outline: none;
		border: 2px solid #0000FF;
		border-radius: 5px;
	}

	.el-button {
		width: 60px;
		height: 35px;
		font-size: 15px;
	}

	.el-main>div {
		margin-top: 5px;
		/* background-image: url(../assets/7.png); */
	}

	.el-main>div:nth-of-type(2) {
		position: absolute;
		width: 88%;
		left: 50%;
		transform: translate(-50%, 0);
		/* background-color: #0000FF; */
		/* background-image: url(../assets/7.png); */
	}

	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
		/* margin-right: 5px;
		margin-bottom: 15px; */
	}

	.button {
		padding: 0;
		float: right;
		margin-right: 34px;
		margin-top: 9px;
	}

	.image {
		/* position: absolute; */
		margin: 0 auto;
		width: 90%;
		display: block;
		border-radius: 10px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.el-menu-demo {
		/* background-color: #0000FF; */
		font-size: 25px;
		color: #cccccc;
	}

	..el-submenu {
		height: 28px;
	}

	.el-submenu__title {
		font-size: 20px;
		color: #cccccc;
		margin-top: -18px;
		height: 28px;
	}

	.el-submenu__title:hover {
		height: 28px;
	}

	.el-menu--horizontal>.el-submenu .el-submenu__title {
		height: 28px;
		line-height: 28px;
		/* background-color: red; */
		font-size: 20px;
		color: #cccccc;
	}

	.el-submenu {
		font-size: 20px !important;
		color: #cccccc !important;
		background-color: transparent !important;
		/* background-color: red !important; */
	}

	ul>li {
		font-size: 20px;
		padding: 10px;
	}
</style>
